<template>
    <div class="footer">
        <img src="http://www.ecdo.net/public/images/f7/e2/20/c588de1925f0cca662fc7d7d3c89a3b0eec6a986.png" alt="" class="footer_bgimg"/>
        <b-map-component :mapHeight="300" :longitude="116.302183" :latitude="39.830263" ></b-map-component>
        <div class="bottom">
            <div class="section-bottom">
                <div class="bottom-right">
                    <p class="wxbox">
                        <span class="bott-title">© 2014-2018 河南喜柚网络科技有限公司</span>
                        <span class="wxicon">&#xe607;</span>
                        <img src="../../assets/code.jpg" alt="" class="wxcode"/>
                        <span class="org_bot_cor"></span>
                    </p>
                    <p> All rights reserved.</p>
                </div>
                <div>
                    <div class="copyright">
                        <p><a href="http://www.miitbeian.gov.cn">豫ICP备16016236号-1</a></p>
                        <p><a>豫B2-20170180</a></p>
                    </div>
                    <a href="https://v.yunaq.com/certificate?domain=www.ecdo.net" target="_blank">
                        <img src="http://www.ecdo.net/public/images/82/d8/de/9bfd6b0dc08c7dd3e2e8c4cd3d51b523efe54cde.png?1488876405#w" alt="" class="safety"/>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data () {
            return {
                isDisplay: false
            }
        },
        methods:{
            enter(){
                this.isDisplay=true;
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    @font-face {
        font-family: 'iconfont';  /* project id 962996 */
        src: url('https://at.alicdn.com/t/font_962996_cp6f6rz10zg.eot');
        src: url('https://at.alicdn.com/t/font_962996_cp6f6rz10zg.eot?#iefix') format('embedded-opentype'),
        url('https://at.alicdn.com/t/font_962996_cp6f6rz10zg.woff2') format('woff2'),
        url('https://at.alicdn.com/t/font_962996_cp6f6rz10zg.woff') format('woff'),
        url('https://at.alicdn.com/t/font_962996_cp6f6rz10zg.ttf') format('truetype'),
        url('https://at.alicdn.com/t/font_962996_cp6f6rz10zg.svg#iconfont') format('svg');
    }
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    p{
        margin: 0;
    }
    .footer{
        width: 100%;
        background: #fff;
        height: 300px;
        padding-top: 50px;
    }
    .footer_bgimg{
        width: 100%;
    }
    .bottom{
        background-color: #fff;
        height: 120px;
    }
    .copyright{
        text-align: center;
        padding-top: 20px;
        box-sizing: border-box;
        float: left;
        margin-right: 20px;
    }
    .copyright p,.copyright a{
        color: #333;
        font-size: 12px;
        text-align: right;
    }
    .bottom-right{
        position: relative;
    }
    .bottom-right img{
        width: 150px;
        height: 150px;
        position: absolute;
        top: -160px;
        right: -30px;
        border-radius: 10px;
        border: 5px solid #0F9DD8;
    }
    .bottom-right p{
        text-align: left;
        font-size: 12px;
    }
    .section-bottom{
        width: 800px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 0 auto;
        padding: 20px;
        box-sizing: border-box;
    }
    .safety{
        width: 83px;
        height: 30px;
        float: right;
        margin-top: 20px;
    }
    .wxicon{
        font-family: 'iconfont';
        color: #10A0EB;
        font-size: 24px;
        margin-left: 20px;
    }
    .bott-title{
        font-size: 12px;
        /*margin-top: -8px;*/
    }
    .org_bot_cor{
        width:0;
        height:0;
        font-size:0;
        border-width:10px;
        border-style:solid;
        border-color: #0F9DD8 transparent transparent;
        _border-color: #0F9DD8 white white;
        visibility: hidden;
        position:absolute;
        right:0;
        top: -10px;
    }
    .wxcode{
        visibility: hidden
    }
    .wxbox{
        line-height: 40px;
    }
    .wxbox:hover .wxcode,.wxbox:hover .org_bot_cor{
        visibility: visible;
    }
</style>
